<template>
    <div style="width: 100%;height: 14vh;background-color: white;">
        <div class="login-head">
            <img src="/imgs/homepage1.jpg" alt="homepage" width="65px" height="65px">
            <div class="logo-besides">
            <p style="font-size: 22px;font-weight: bold;">聚睿吉利</p>
            <p style="font-weight: bold; font-size: 12px;">新质智能材价平台</p>
          </div>
        </div>
    </div>
    <div style="width: 100%;height: 76vh;">
        <div class="login-middle">
            <div class="ltitle"><p style="font-size: 20px;">用户登录</p></div>
            <div class="llogin">
                <div class="login-img" style="width: 40%;height: 100%;">
                <img src="/imgs/login.jpg" alt="" style="width: 100%;height: 100%;">
              </div>
                <div class="login-hiddle">
                  <div class="login-float"></div>
                  <div class="login-float-r"></div>
                  <div class="login-title">
                    <div style="display: flex;justify-content: center">
                      <div @click="switchCom(item, index)" :class="[active == index ? 'active2' : '']" class="loginway"
                    v-for="(item, index) in loginWay">
                    <div>{{ item.name }}</div>
                    </div>
                  </div>
                  <component :is="comId"></component>
                  
                </div>
            </div>
        </div>
      </div>
    </div>
    <div style="width: 100%;height: 10vh;text-align: center;background-color: white;">
      <p style="font-size: 13px;margin-top: 22px;margin-bottom: 5px;">Copyright @www.AxureUX.com, All Rights Reserved</p>
      <p style="font-size: 13px;margin: 0;">专业的交互原型素材原创分享平台</p>
    </div>
</template>

<script setup>
import { DoubleRightOutlined } from '@ant-design/icons-vue';

import Account from "./Login/account.vue";
import Telephone from "./Login/telephone.vue";
import { ref,reactive } from "vue";
const comId = ref(Account)
const active = ref(0)

const switchCom = (item, index) => {
  comId.value = item.com
  active.value = index
}
const icon1=() => h(DoubleRightOutlined)
const loginWay = reactive([
  {
    name: '账号登录',
    com: Account
  },
  {
    name: '短信登录',
    com: Telephone
  }
])
</script>

<style>
    .login-head{
      width: 65%;
      height: 70px;
      margin: auto;
      margin-top: 20px;
      display: flex;
    }
    .login-head-logo{
      width: 165px;
      height: 100%;
    }
    .logo-besides{
      float: right;
      padding-top: 4px;
      color: orange;
    }
    .logo-besides p{
      margin: 0;
    }
    .login-middle{
        width: 65%;
        height: 100%;
        margin: auto;
    }
    .ltitle{
        width: 100%;
        height: 8vh;
        line-height: 8vh;
        padding-left: 10px;
    }
    .llogin{
        display: flex;
        width: 100%;
        height: 60vh;
        margin-top: 10px;
        border-radius: 10px;
        overflow: hidden;
        
    }
    .login-hiddle{
      position: relative;
      width: 60%;
      height: 100%;
      background-color: white;
      /* background-color: pink; */
    }
    .login-float{
      position: absolute;
      width: 65px;
      height: 65px;
      border-radius: 0 0 0 65px;
      top: 0;
      right: 0;
      background-color: orange;
    }
    .login-float-r{
      position: absolute;
      width: 24px;
      height: 24px;
      top: 15px;
      right: 15px;
      background-color: white;
    }
    .login-title{
      width: 70%;
      height: 10%;
      margin: auto;
      margin-top: 65px;
      text-align: center;
      
    }
    .loginway{
      cursor: pointer;
      padding: 0 15px;
      font-size: 18px;
      margin-bottom: 25px;
      font-weight: bolder;
    }
    .loginway:first-child{
      border-right: 1px solid rgb(128, 128, 128);
    }
    .active2{
      color: orange;
    }
    .login-sider{
      width: 100%;
      height: 60px;
      text-align: center;
      border: 1px solid red;
      user-select: none;
    }
</style>